<template>
	<div>
		count vary {{startVal}} end value {{endVal}}
		<div class="run">
			{{curr_value}}
		</div>
		<div>
			<button @click="start">start btn</button>
			<button @click="reset">reset btn</button>
		</div>
		
	</div>
</template>

<script>
	export default {
		name:'count-to',
		data(){
			return {
				autoPlay:true,
				curr_value:0
			}
		},
		props: {
			startVal: {
				type:[Number,String] ,
				default: 0
			},
			endVal:{
				type:[Number,String] ,
				default:0
			},
			duration:{
				type:[Number,String],
				default:2000,
			}
		},
		methods: {
			playAnimation() {
				
			},
			easingFn(t, b, c, d) {
				return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
			},
			reset(){
				this.curr_value=this.startVal;
			},
			start(){
				var darution=20,vm=this;
				var rankNum = parseInt(Math.random()*25+1,10) 
				let time=setTimeout(()=>{
					if(vm.curr_value<vm.endVal){
						vm.curr_value=Number(vm.curr_value)+rankNum;
						vm.start()
					}else{
						vm.curr_value=vm.endVal;
						clearTimeout(time)
					}
				},darution)
			},
		},
		created(){
			this.curr_value=this.startVal
		}
	}
</script>

<style>
	button+button{
		margin-left:10px;
	}
</style>
